.fourgrid{

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem 2rem;
    a:hover{
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
        p{
            color: var(--primary);
        }
        img{
            transform: scale(1.05);
        }
    }
    a{
        overflow: hidden;
        border-radius: 1rem;
        box-shadow:1rem 1rem .4rem var(--greyLight-2), -.2rem -0.2rem 0.5rem var(--white);

        p{
            margin: 0.4rem 0.4rem;
            color: var(--greyDark);
            height: 24%;
            overflow: hidden;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-break: anywhere;
        }
        
    }
    
    img{
        width: 100%;
        border-radius: .5rem;
        transition: all .4s;
    }
  
}